import React from 'react';
import moment from 'moment';
import router from 'umi/router';
//import Link from 'umi/link'

import { connect } from 'dva';

import {  Button,Form, //Input,
  InputNumber, Select,DatePicker } from 'antd';

const FormItem = Form.Item;

const { Option } = Select;


const linePath = '/AccountPayment/Payment';


@connect(({
  accountPayment,accountJournal,resPartner,accountPaymentMethod
}) => ({
  accountPayment,accountJournal,resPartner,accountPaymentMethod
}))
@Form.create()
class FormCreate extends React.Component {
  state = {
  }

  id = 0

  async componentDidMount() {
    const { location: {query: { id } } } = this.props;

    const { dispatch } = this.props;

    if (id) {
      this.id = Number(id)
      await dispatch({
        type: 'accountPayment/view',
        payload:  { id:  this.id }
      });
    }

    await dispatch({
      type: 'accountJournal/search',
      payload: {domain:[] },
    });

    await dispatch({
      type: 'resPartner/search',
      payload: {domain:[] },
    });

    await dispatch({
      type: 'accountPaymentMethod/search',
      payload: {domain:[] },
    });

  }


  handleSubmit = e => {
    const { dispatch, form } = this.props;
    e.preventDefault();


    const create_or_write = async (vals) => {
      if(this.id){
        await dispatch({
          type: 'accountPayment/write',
          payload : {
            id: this.id,  vals,
          },
        });

        router.push(`${linePath}?id=${this.id}`);
      }
      else{
        await dispatch({
          type: 'accountPayment/create',
          payload : {
            vals,
          },
        });

        const { accountPayment } = this.props;
        if (accountPayment.id){
          router.push(`${linePath}?id=${accountPayment.id}`);
        }
      }
    }


    form.validateFieldsAndScroll( async (err, values) => {
      if (!err) {
        const { payment_date } = values;

        const vals = {
          ...values,
          payment_date: payment_date.format('YYYY-MM-DD'),
        };

        console.log( vals );

        await create_or_write(vals)

      }
    })
  }


  render() {
    const { form: { getFieldDecorator }  } = this.props;
    const { accountPayment: { record } } = this.props
    const { accountJournal: { recordsList: journalList } } = this.props;
    const { resPartner: { recordsList: partnerList } } = this.props;

    const { accountPaymentMethod: { recordsList: paymentMethodList } } = this.props;


    return (
      <div>
          <Form onSubmit={this.handleSubmit} >
            <FormItem style={{ marginTop: 32 }}>
              <Button type="primary" htmlType="submit" >提交
              </Button>
            </FormItem>

            <FormItem label="金额">
              {getFieldDecorator('amount', {
                rules: [{ required: true }],
                initialValue: record.amount || 0,
              })(
                <InputNumber />
              )}
            </FormItem>


            <FormItem label="支付类型">
              {getFieldDecorator('payment_type', {
                rules: [{ required: true }],
                initialValue: record.payment_type
              })(
                <Select
                  placeholder="账簿" >
                  <Option value={'inbound'} >收款</Option>
                  <Option value={'outbound'} >付款</Option>
                  <Option value={'transfer'} >内部转账</Option>
                </Select>

              )}
            </FormItem>

            <FormItem label="业务伙伴类型">
              {getFieldDecorator('partner_type', {
                rules: [{ required: true }],
                initialValue: record.type || 'customer'
              })(
                <Select
                  placeholder="账簿" >
                  <Option value={'customer'} >客户</Option>
                  <Option value={'supplier'} >供应商</Option>
                </Select>

              )}
            </FormItem>

            <FormItem label="账簿">
              {getFieldDecorator('journal_id', {
                rules: [{ required: true }],
                initialValue: record.journal_id ? record.journal_id.id : 0
              })(
                <Select
                  placeholder="账簿" >
                  <Option value={0} >未选择</Option>
                  {journalList.map(item => {
                    return (
                      <Option value={item.id} key="id">
                        {`${item.code} ${item.name}`}
                      </Option>
                    );
                  })}

                </Select>

              )}
            </FormItem>

            <FormItem label="目标账簿">
              {getFieldDecorator('destination_journal_id', {
                rules: [{ required: true }],
                initialValue: record.destination_journal_id ? record.destination_journal_id.id : 0
              })(
                <Select
                  placeholder="账簿" >
                  <Option value={0} >未选择</Option>
                  {journalList.map(item => {
                    return (
                      <Option value={item.id} key="id">
                        {`${item.code} ${item.name}`}
                      </Option>
                    );
                  })}

                </Select>

              )}
            </FormItem>



            <FormItem label="客户/供应商">
              {getFieldDecorator('partner_id', {
                rules: [{ required: true }],
                initialValue: record.partner_id ? record.partner_id.id : 0
              })(
                <Select
                  placeholder="客户/供应商" >
                  <Option value={0} >未选择</Option>
                  {partnerList.map(item => {
                    return (
                      <Option value={item.id} key="id">
                        {`${item.code} ${item.name}`}
                      </Option>
                    );
                  })}

                </Select>

              )}
            </FormItem>


            <FormItem label="付款方式">
              {getFieldDecorator('payment_method_id', {
                rules: [{ required: true }],
                initialValue: record.payment_method_id ? record.payment_method_id.id : 0
              })(
                <Select
                  placeholder="客户/供应商" >
                  <Option value={0} >未选择</Option>
                  {paymentMethodList.map(item => {
                    return (
                      <Option value={item.id} key="id">
                        {`${item.code} ${item.name} ${item.payment_type}`}
                      </Option>
                    );
                  })}

                </Select>

              )}
            </FormItem>

            <FormItem label="日期">
              {getFieldDecorator('payment_date', {
                rules: [{ required: true }],
                initialValue: record.payment_date ? moment(record.payment_date, 'YYYY-MM-DD') : moment()
              })(<DatePicker />)}
            </FormItem>


          </Form>


      </div>

    );
  }
}


export default FormCreate


